@font-face
{
    font-family: YaHeiLight;
    src: url('font/YaHeiLight.ttf')  format('truetype');
}

@font-face
{
    font-family: Futura;
    src: url('font/Futura.ttf')  format('truetype');
}


* {
    font-family: Futura, YaHeiLight, monospace;
    margin: 0;
}

.head {
    position: fixed;
    width: 100%;
    height: 10vh;
    top:0;
    background-color: #fff;
    z-index: 100;
    transition: 0.5s;
}

.banner {
    position: absolute;
    width: 100%;
    height: 90vh;
    top:0;
}

.head-logo {
    font-size: 1.5em;
    position: absolute;
    left: 15%;
    margin-top: 3vh;
    font-family: Futura;
}

.head-logo c {
    width: 1.5em;
    height: 1.5em;
    float: left;
    border-top: 1px solid #999;
    font-size: 0.8em;
    text-align: center;
    line-height: 1.5em;
    font-family: Futura;
}

.head-logo span {
    font-size: 0.5em;
    display: block;
    text-indent: 4em;
    color: #f00;
    line-height: 2em;
}

.head-menu {
    position: absolute;
    right: 15%;
    line-height: 10vh;
    color: #f00;
    transition: 0.3s;
}

.head-menu span {
    margin-right: 0.5em;
    color: #000;
}

.head-menu a {
    margin-left: 2em;
    font-size: 0.7em;
    transition: 0;
}

.head-menu span {
    transform: 0;
}

.head-menu span {
    font-size: 1.3em;
}

.banner-body {
    position: absolute;
    width: 100%;
    height: 100%;
}

.banner-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    opacity: 0;
    transition: 1s;
}

.banner-date {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.banne-date-bunmr {
    color: #f00;
    position: absolute;
    bottom: 5vh;
    left: 15%;
    font-size: 0.8em;
}

.banne-date-bunmr i {
    font-size: 0.8em;
}

.banne-date-bunmr p {
    float: left;
    margin-right: 1em;
    transition: 0.5s;
}

.banner-date-text {
    position: absolute;
    left: 15%;
    bottom: 15vh;
    font-size: 1.3em;
}

.banner-date-text p {
    opacity: 0;
    display: none;
    transition: 0.5s;
}

.banner-date-text span {
    display: block;
    font-size: 0.8em;
    text-indent: 7em;
    line-height: 4em;
}

.home-head {
    position: absolute;
    width: 100%;
    top:0;
    height: 20vh;
    background-color: #fff;
}

.home-head-left {
    position: absolute;
    left: 15%;
    margin-top: 7vh;
    color: #f00;
}

.home-head-left:hover {
    word-spacing: 1em;
    transition: 1s;
}

.home-head-left span {
    display: block;
    color: #000;
    font-size: 0.8em;
    text-indent: 2em;
    margin-top: 1em;
}

.home-head-left i {
    font-size: 1.3em;
    margin-right: 1em;
}

.home-head-right {
    position: absolute;
    right: 15%;
    margin-top: 7vh;
    line-height: 1.5em;
    color: #999;
    text-align: right;
}

.img-1 {
    background-image: url(../img/banner-1.jpg);
    background-size: cover;
}

.img-2 {
    background-image: url(../img/banner-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.banner-on {
    opacity: 1;
}

.img-3 {
    background-image: url(../img/banner-3.jpg);
    background-size: cover;
}

#banner-date-text-on {
    display: block;
    opacity: 1;
}

.banner-text-1 {
    color: #fff;
}

.banner-text-2 {
    color: #fff;
}

.banner-text-3 {
    color: #fff;
}

.home-body {
    position: absolute;
    width: 100%;
    height: 75vh;
    top:20vh;
    background-color: #fff;
}

.home-body-time {
    position: absolute;
    width: 70%;
    left: 15%;
    height: 30vh;
    background-color: #000;
    text-align: center;
    transition: 0.5s;
    top:0;
}

.home-body-time img {
    transition: 0.5s;
}

.home-body-time p {
    position: absolute;
    color: #fff;
    margin-top: 14vh;
    font-size: 1.5em;
    text-align: left;
    left: 10%;
    transition: 0.5s;
}

.home-body-time span {
    display: block;
    font-size: 0.7em;
    text-indent: 8em;
    color: #f00;
}

.home-body-sever {
    position: absolute;
    right: 15%;
    width: 70%;
    height: 20vh;
    top:40vh;
}

.home-body-sever span {
    line-height: 4em;
    color: #f00;
    display: block;
}

.home-body-sever i {
    font-size: 1.3em;
    margin-right: 1em;
}

.home-body-img {
    position: absolute;
    width: 20%;
    right: 15%;
    top:60vh;
    height: 40vh;
}

.home-body-img:hover {
    background-color: #ddd;
    background-size: 120%;
    transform: 1s;
}

.home-body-time-img {
    margin-left: 100px;
}

.home-body-sever-design {
    position: absolute;
    right: 60%;
    top: 10em;
    text-align: left;
    width: 40%;
}

.home-body-sever-design p {
    font-size: 0.8em;
}

.head-off {
    height: 5vh;
    background-color: #000;
}

.head-logo-off {
    font-size: 1.3em;
    color: #f00;
    line-height: 5vh;
    margin-top: 0;
}

.head-menu-off {
    line-height: 5vh;
    color: #fff;
}

.home-body-fuwu {
    position: absolute;
    width: 50%;
    left: 15%;
    height: 40vh;
    top:60vh;
    background-color: #383838;
}

.home-body-sever-date {
    position: absolute;
    width: 50%;
    height: 100%;
    top:0;
    right: 0;
}

.home-body-fuwu-div {
    float: left;
    width: 5%;
    height: 100%;
    text-align: center;
    position: relative;
    border-right: 2px solid #999;
}

.home-1 {
    position: fixed;
    width: 100%;
    height: 90vh;
    bottom: 0;
    transition: 0.5s;
}

.home-2 {
    position: fixed;
    width: 100%;
    height: 95vh;
    bottom: -95vh;
    transition: 0.5s;
    background-color: #fff;
}

.home-1-on {
    bottom: 100vh;
}

.home-2-on {
    bottom: 0;
}

.home-3 {
    position: fixed;
    width: 100%;
    height: 95%;
    bottom: -95vh;
    transition: 0.5s;
}

.home-3-on {
    bottom: 0;
}

.home-2-off {
    bottom: 100%;
}

.home-nub-on {
    opacity: 1;
}

.h-b-s-d-icon {
    float: left;
    width: 33%;
    height: 100%;
    text-align: center;
}

.h-b-s-d-icon img {
    margin-top: 20%;
    margin-bottom: 1em;
    transition: 0.5s;
}

.h-b-s-d-icon img:hover {
    height: 40%;
}
